<template>
  <div class="overviewOf">
    <!-- overviewOf 概览 -->
    <div class="main-title">实况概览</div>
    <el-card shadow="never">
      <div class="hover_big">
        <div class="card_gutter">
          <div @click="jumpClickUser('a')">
            <p>今日活跃用户</p>
            <a href="JavaScript:;">{{ guanlianShang.huo }}</a>
          </div>
          <div @click="jumpClickUser('b')">
            <p>今日新增用户</p>
            <a href="JavaScript:;">{{ guanlianShang.zeng }}</a>
          </div>
          <div @click="jumpClickUser('c')">
            <p>平台累计用户</p>
            <a href="JavaScript:;">{{ guanlianShang.lei }}</a>
          </div>
          <div @click="jump('new')">
            <p>新增课件数(个)</p>
            <a href="JavaScript:;">{{ guanlianShang.zengYuan }}</a>
          </div>
          <div @click="jump('timer')">
            <p>累计使用时长</p>
            <a href="JavaScript:;">{{ guanlianShang.leishi == 'NaN秒' ? '0' : guanlianShang.leishi }}</a>
          </div>
          <div @click="jump('cumulative')">
            <p>课件总数(个)</p>
            <a href="JavaScript:;">{{ guanlianShang.leiyuan }}</a>
          </div>
          <div @click="jump('taiwan')"> 
            <p>平台累计设备(台)</p>
            <a href="JavaScript:;">{{ guanlianShang.leishe }}</a>
          </div>
        </div>
      </div>
    </el-card>
    <div class="main-title">最近资源</div>
    <div class="resources_">
      <div class="tabs_top">
        <el-button-group>
          <el-button v-for="(item, index) in tags" :key="index" @click="switchingData(item, index)" :class="ind == index ? 'active' : ''"> {{ item.name }} </el-button>
        </el-button-group>
      </div>

      <overview-of :tableData="tableData" @cellClickOnge="cellClickOnge"></overview-of>
      <!-- <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="prev, pager, next, jumper"
        :total="total" >
      </el-pagination> -->
    </div>
  </div>
</template>

<script>
import overviewOf from '../../components/overviewOf/overviewOf.vue';
import { timestampToTimeShi } from '../../utils/util';
import { defineAsyncComponent } from 'vue';
// const overviewOf = defineAsyncComponent(() => import('../../components/overviewOf/overviewOf.vue'));  // vue3中分包加载的方法 返回的是一个promise对象 解决首屏加载白屏问题
export default {
  components: { overviewOf },
  data() {
    return {
      ind: 0,
      tags: [{ id: 1, name: '全部' },{ id: 2, name: '理化生实验' },{ id: 3, name: '数学几何' },{ id: 4, name: '心理健康' },{ id: 5, name: '校园安全' },{ id: 6, name: '人文地理' }], //  最近资源切换
      tableData: [], // 表格中的数据
      guanlianShang: {}, // 实况概览请求到的数据
      currentPage: 1,
      total: 0,
      pageSize: 0,
      zName: '' // 选则的内容
    }
  },
  mounted() {
    var _this = this
    _this.recentResources() // 概览页面获取信息
    _this.overviewLive() // 实况概览
    // _this.publicPages()   // 全部数据
  },
  methods: {
    // 获取首页实况概览
    overviewLive() {
      this.$http.userMG.guanlishang().then(result => {
        this.guanlianShang = result.data;
        this.guanlianShang.leishi = timestampToTimeShi(result.data.leishi);
      })
    },
    // 最近资源获取数据
    recentResources(currentPage) {
      this.$http.userMG.overview({ page: currentPage }).then(res => {
        this.tableData = res.data;
        this.pageSize = res.size;
        this.total = res.total;
        this.currentPage = res.currentPage;
        this.gongGongStudent();
      }).catch(res => { console.log(res) })
    },
    // 更改公共的累计学习时长h
    gongGongStudent(time){
      this.tableData.filter( item => {
        if(item.pinshi != null) {
          item.pinshi = timestampToTimeShi(item.pinshi);
        }
      })
    },
    // 跳转至用户列表
    jumpClickUser(val) {
      if(val == 'a' || val == 'c'){
        this.$router.push({ path: '/theUser' })
      } else {
        sessionStorage.setItem('Today','Today')
        this.$router.push({ path: '/theUser' })
      }
    },
    jump(val) {
      if (val == 'new') {
        sessionStorage.setItem('Today','Today');
        this.$router.push({ path: '/content' })
      } else if (val == 'timer') {
        this.$router.push({ path: '/content' })
      } else if (val == 'cumulative') {
        // this.$router.push({ path: '/statistical' })
        this.$router.push({path: '/content'})
      } else {
        this.$router.push({ path: '/equipment' })
      }
    },
    // 切换请求数据
    switchingData(item, val) {
      this.ind = val;
      this.zName = item;
      if (item.name === '全部') { this.recentResources(this.currentPage) } 
      else { this.currentPage = 1; this.publicPages(this.currentPage, item.name) }
    },
    // 跳转至对应的详情页
    cellClickOnge(row){
      sessionStorage.setItem('userData', JSON.stringify(row));
      this.$router.push({ name: 'details' });
    },
    // 分页
    handleSizeChange(val) {
      this.currentPage = val
      this.publicPages(val, this.zName.name)
    },
    handleCurrentChange(val) {
      this.currentPage = val
      if (this.zName.name == '全部') {
        this.$http.userMG.overview({ page: val }).then(res => {
          this.tableData = res.data
          this.total = res.total
          this.currentPage = res.currentPage
          this.gongGongStudent();
        })
      } else {
        this.publicPages(val, this.zName.name);
      }
    },
    // 公共分页
    publicPages(val, subject) {
      this.$http.userMG.overview({ page: val, fname: subject }).then(result => {
        this.tableData = result.data;
        this.total = result.total;
        this.currentPage = result.currentPage;
        this.gongGongStudent();
      })
    }
  }
}
</script>

<style lang="css" scoped>
@import '../../assets/css/overviewOf/overviewOf.scss';
</style>
